<template>
  <div class="edit-enterprise-detail" v-if="props.showDialog">
    <Dialog
      diaTop="5"
      headerName="编辑"
      :showDialog="true"
      @close="close"
      @save="save"
      saveLetter="保存"
      diaWidth="55"
      footerTop="20"
    >
      <template #content>
        <div class="content-wrap">
          <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="160px"
            label-position="rigth"
          >
            <el-row :gutter="60">
              <el-col :span="12">
                <el-form-item label="企业名称：" prop="enterprisename">
                  <el-input v-model="formData.enterprisename" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业类别：" prop="enterprisetype">
                  <el-select
                    v-model="formData.enterprisetype"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="污染治理" :value="1" />
                    <el-option label="第三方检测 " :value="2" />
                    <el-option label="环评咨询" :value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="12">
                <el-form-item label="区域：" prop="district">
                  <el-tree-select
                    v-model="formData.district"
                    :data="adminAreaList"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细地址：" prop="address">
                  <el-input clearable v-model="formData.address" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="管辖地：" prop="permitNumber">
                  <el-input clearable v-model="formData.permitNumber" />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row :gutter="60">
              <el-col :span="12">
                <el-form-item label="环保管理员：" prop="contactperson">
                  <el-input clearable v-model="formData.contactperson" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号：" prop="mobile">
                  <el-input clearable v-model="formData.mobile" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="12">
                <el-form-item label="年处置规模：" prop="wastedisposescale">
                  <el-input clearable v-model="formData.wastedisposescale" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态：" prop="status">
                  <el-select
                    v-model="formData.status"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in enterpriseStatusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="60">
              <el-col :span="12"> </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="12">
                <el-form-item label="经营范围：" prop="businessscope">
                  <el-input
                    clearable
                    :rows="3"
                    type="textarea"
                    v-model="formData.businessscope"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资质证书：" prop="permitwasteimageurl">
                  <div class="qr-code">
                    <Upload
                      :ref="
                        (data) => {
                          if (data.imgUrl) {
                            formData.permitwasteimageurl = data.imgUrl;
                          }
                        }
                      "
                    >
                      <template #content>
                        <div class="content">
                          <img
                            :src="formData.permitwasteimageurl"
                            v-if="formData.permitwasteimageurl"
                            alt=""
                          />
                          <button v-if="!formData.permitwasteimageurl">
                            点击上传
                          </button>
                        </div>
                      </template>
                    </Upload>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="12">
                <el-form-item label=" 守法证明：" prop="lawimageurl">
                  <div class="qr-code">
                    <Upload
                      :ref="
                        (data) => {
                          if (data.imgUrl) {
                            formData.lawimageurl = data.imgUrl;
                          }
                        }
                      "
                    >
                      <template #content>
                        <div class="content">
                          <img
                            :src="formData.lawimageurl"
                            v-if="formData.lawimageurl"
                            alt=""
                          />
                          <button v-if="!formData.lawimageurl">点击上传</button>
                        </div>
                      </template>
                    </Upload>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="营业执照：" prop="creditimageurl">
                  <div class="qr-code">
                    <Upload
                      :ref="
                        (data) => {
                          if (data.imgUrl) {
                            formData.creditimageurl = data.imgUrl;
                          }
                        }
                      "
                    >
                      <template #content>
                        <div class="content">
                          <img
                            :src="formData.creditimageurl"
                            v-if="formData.creditimageurl"
                            alt=""
                          />
                          <button v-if="!formData.creditimageurl">
                            点击上传
                          </button>
                        </div>
                      </template>
                    </Upload>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import http from "@http";
import ElMessage from "@msg";
import Upload from "@/components/Upload";
import changeArea from "@/utils/changeArea.js";
let props = defineProps(["showDialog", "enterpriseDetail", "addFlag"]);
let emit = defineEmits(["update:showDialog", "save"]);
let adminAreaList = ref([]);
let formData = reactive({});
let enterpriseStatusList = ref([]);
watch(
  () => props.enterpriseDetail,
  (val) => {
    for (let key in val) {
      formData[key] = val[key];
    }
    formData.district = Number(formData.district);
    formData.status = String(formData.status);
  },
  { deep: true }
);
watch(
  () => props.addFlag,
  () => {
    if (props.addFlag) {
      for (let key in formData) {
        formData[key] = "";
      }
    }
  },
  { deep: true }
);
let close = () => {
  emit("update:showDialog", false);
};
let validateNum = (rule, value, callback) => {
  let reg = /^1\d{10}$/;
  if (!reg.test(value)) {
    callback(new Error(rule.message));
    return;
  }
  callback();
};
http({ url: "/listitem/getmodule", data: { module: "B06" } }).then((res) => {
  console.log(res, "res");
  if (res.code == 0) {
    enterpriseStatusList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
let save = () => {
  http({ url: "/admPCEnterpriseThird/update", data: formData }).then((res) => {
    if (res.code == 0) {
      if (formData.id) {
        ElMessage({ msg: "修改成功" });
        emit("save", formData.id);
        return;
      }
      emit("save");
    }
  });
};
http({ url: "/region/datalisttree" }).then((res) => {
  console.log(res, "res");
  if (res.code == 0) {
    adminAreaList.value = changeArea(res.data);
  }
});
let rules = {
  enterprisename: [
    {
      required: true,
      message: "企业名称不能为空",
      trigger: "blur",
    },
  ],
  district: [
    {
      required: true,
      message: "区域不能为空",
      trigger: "blur",
    },
  ],
  enterprisetype: [
    {
      required: true,
      message: "企业类别不能为空",
      trigger: "blur",
    },
  ],
  district: [
    {
      required: true,
      message: "区域不能为空",
      trigger: "blur",
    },
  ],
  wastedisposescale: [
    {
      required: true,
      message: "年处置规模不能为空",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "详细地址不能为空",
      trigger: "blur",
    },
  ],
  contactperson: [
    {
      required: true,
      message: "环保管理员不能为空",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: true,
      message: "手机号不能为空",
      trigger: "blur",
    },
    {
      validator: validateNum,
      trigger: "blur",
      message: "请输入正确的手机号码",
    },
  ],
  creditimageurl: [
    {
      required: true,
      message: "营业执照不能为空",
      trigger: "blur",
    },
  ],
  permitwasteimageurl: [
    {
      required: true,
      message: "资质证书不能为空",
      trigger: "blur",
    },
  ],
  lawimageurl: [
    {
      required: true,
      message: "守法证明不能为空",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "状态不能为空",
      trigger: "blur",
    },
  ],
};
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.edit-enterprise-detail {
  .content-wrap {
    padding-right: 10px;
    .qr-code {
      width: 236px;
      height: 163px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #bfbfbf;
      display: flex;
      /* flex-direction: column; */
      line-height: 163px;
      justify-content: center;

      .content {
        display: flex;
        width: 100%;

        /* flex-direction: column; */
        img {
          width: 236px;
          height: 163px;
          /* width: 280px;
          height: 189px; */
        }
        button {
          margin-top: 5px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #0874fa;
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }
  :deep(.el-input) {
    width: 344px;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
  }
  :deep(.el-input__inner::placeholder) {
    font-size: 18px !important;
  }
  :deep(.el-textarea__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    background-color: #fff;
    line-height: 38px !important;
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }
  :deep(.el-input.el-input--suffix) {
    width: 100%;
  }
}
</style>
